<template>
  <div id="daily" style="background: #fff; position: relative">
    <div class="time" v-if="time">
      剩余时间： <span>{{ time }}秒 </span>
    </div>
    <!-- <div class="num"> <span style=""> {{ index + 1 }} </span> {{ '/' + questionList.length }} </div> -->
    <div class="questionsList">
      <div
        class="item"
        v-for="(item, idx) in questionList"
        :key="item.id"
        :id="`que${idx}`"
      >
        <radioT
          v-if="item.type == '单选题'"
          :item="item"
          @changeres="changeres"
          :index="idx"
          :isdetail="isdetail"
        >
        </radioT>

        <tiankong
          v-if="item.type == '填空题'"
          :item="item"
          :index="idx"
          :isdetail="isdetail"
        >
        </tiankong>
        <radiod
          v-if="item.type == '多选题'"
          :item="item"
          @changeres="changeres"
          :index="idx"
          :isdetail="isdetail"
        >
        </radiod>

        <determine
          v-if="item.type == '判断题'"
          :item="item"
          @changeres="changeres"
          :index="idx"
          :isdetail="isdetail"
        >
        </determine>
        <answers
          v-if="item.type == '问答题'"
          :item="item"
          @changeres="changeres"
          :index="idx"
          :isdetail="isdetail"
        >
        </answers>
      </div>
    </div>
    <div class="btn" style="margin: auto" v-if="!isdetail">
      <!-- <el-button type="primary" @click="submitBtn" v-if="!isOver"> 确认 </el-button>
            <el-button type="primary" @click="nextti" v-if="isOver && questionList.length != index + 1"> 下一题
            </el-button> -->

      <el-button type="primary" @click="submitBtn"> 交卷 </el-button>
    </div>
    <div class="answer-sheet">
      <div class="btnimg" @click="dati">
        <div class="img">
          <img
            src=""
            alt=""
            data-v-20257f5c=""
          />
        </div>
        <span data-v-20257f5c="">答题卡</span>
      </div>
    </div>
    <el-dialog
      title="答题卡"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose"
    >
      <div class="dati">
        <div class="shiyi">
          <div class="shiItem shiItem1"><span></span> 已答</div>
          <div class="shiItem shiItem2"><span></span> 未答</div>
        </div>

        <div class="sheet-list">
          <div class="clearfix">
            <div
              v-for="(item, idx) in questionList"
              class="answer-chunk"
              :class="item.myAnswers || item.myAnswers == '0' ? 'act2' : ''"
              v-scrollTo="`#que${idx}`"
              :key="idx"
            >
              {{ idx + 1 }}
            </div>
          </div>
          <!-- <div class="questions-item">
                                <radioT :item="item2" v-for="(item2, idx) in item.list"></radioT>
              </div>-->
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button type="primary" @click="submitBtn"> 交卷 </el-button>
        </span>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import radioT from "./components/radio";
import tiankong from "./components/tiankong";
import request from "@/utils/request";
import radiod from "./components/radiod";

import determine from "./components/determine";
import answers from "./components/answers";
import { init } from "echarts";

export default {
  name: "certificate",
  components: {
    radioT,
    tiankong,
    radiod,
    determine,
    answers,
  },
  props: {
    questionList: {
      type: Array,
      default: [],
    },
    isdetail: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      dialogVisible: false,
      time: 0,
      isOver: false,
      timer: null,
      // index: 0,
      // item: {},  // 当前题目对象
    };
  },
  mounted() {},
  methods: {
    dati() {
      this.dialogVisible = true;
    },
    back() {
      this.$emit("back");
    },
    inittime(time) {
      this.time = time;

      this.timer = setInterval(() => {
        this.time = this.time - 1;
        if (this.time == 0) {
          this.$emit("submit", this.questionList);
        }
      }, 1000);
    },
    nextti() {
      // this.isOver = false
      // this.index = this.index + 1
      // this.item = {}
      // this.$nextTick(() => {
      //     this.item = this.questionList[this.index]
      // })
    },
    submitBtn() {
      this.$confirm("是否确认交卷？", "交卷提示", {
        distinguishCancelAndClose: true,
        confirmButtonText: "确认",
        cancelButtonText: "取消",
      }).then((res) => {
        this.$emit("submit", this.questionList);
      });

      // var objItem = { ...this.item }

      // if (objItem.questionType == "selectTi" || objItem.questionType == "multiple" || objItem.questionType == "determine") {
      //     objItem.options = JSON.stringify(ele.options);
      // }
      // if (this.index + 1 == this.questionList.length) {
      //     saveCompleteTheAnswer(objItem).then(res => {

      //         this.questionList = res.data.questionList
      //         this.item = this.questionList[this.index]
      //         // this.item.options = JSON.parse(this.item.options)
      //         this.changeList( this.questionList)
      //         this.isOver = true

      //     })
      // } else {
      //     saveEverydayQuestionResult(objItem).then(res => {

      //         this.questionList[this.index] = res.data
      //         this.item = this.questionList[this.index]
      //         // this.item.options = JSON.parse(this.item.options)
      //         this.changeList([this.item])
      //         this.isOver = true

      //     })
      // }
    },
    ok() {
      this.$emit("submit", this.questionList);
    },
    changeList(arr) {
      arr.forEach((el) => {
        if (el.questionType == "selectTi") {
          el.type = "单选题";
          el.options = JSON.parse(el.options);
        } else if (el.questionType == "multiple") {
          el.type = "多选题";
          el.options = JSON.parse(el.options);
        } else if (el.questionType == "determine") {
          el.type = "判断题";
          el.options = JSON.parse(el.options);
        } else if (el.questionType == "blank") {
          el.type = "填空题";
        } else if (el.questionType == "answers") {
          el.type = "问答题";
        }
      });
    },
    changeList(arr) {
      arr.forEach((el) => {
        if (el.questionType == "selectTi") {
          el.type = "单选题";
          el.options = JSON.parse(el.options);
        } else if (el.questionType == "multiple") {
          el.type = "多选题";
          el.options = JSON.parse(el.options);
        } else if (el.questionType == "determine") {
          el.type = "判断题";
          el.options = JSON.parse(el.options);
        } else if (el.questionType == "blank") {
          el.type = "填空题";
        } else if (el.questionType == "answers") {
          el.type = "问答题";
        }
      });
    },
  },
  beforeDestroy() {},
};
</script>

<style lang="scss" scoped>
.time {
  margin-top: -30px;
  margin-left: 30px;
  margin-bottom: 20px;
  font-size: 16px;
  color: #666;

  span {
    color: #e82f2e;
  }
}

.answer-sheet {
  width: 80px;
  position: absolute;
  right: 16px;
}

.btnimg {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 10px hsla(0, 0%, 58%, 0.15);
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  flex-direction: column;
  cursor: pointer;
  position: fixed;
  bottom: 150px;
  // right: 200px;
  // float: right;

  .img {
    width: 28px;
    height: 28px;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 0;
    position: relative;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;

    img {
      width: 100%;
      height: 100%;
    }
  }

  span {
    font-size: 12px;
    line-height: 17px;
    color: #377dff;
    margin-top: 2px;
  }
}

.num {
  position: absolute;
  top: 0px;
  right: 30px;

  span {
    font-size: 18px;
    font-weight: 600;
    color: #2a8ff7;
  }
}

.btn {
  width: 80px;
}

#daily {
  // padding: 20px;
  float: right;
  margin-top: 20px;
  width: 955px;
  background-color: #fff;
}

.dati {
  text-align: center;
  background-color: #fff;
}

.shiyi {
  padding-bottom: 20px;
  font-size: 16px;
  color: #333;
  display: flex;
  justify-content: space-around;
  align-items: unset;
  flex-direction: row;

  .shiItem {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-direction: row;

    span {
      width: 16px;
      height: 16px;
      margin-right: 4px;
      border-radius: 2px;
    }
  }

  .shiItem1 {
    span {
      background-color: #447dff;
    }
  }

  .shiItem2 {
    span {
      border: 1px solid #999;
    }
  }

  .shiItem3 {
    span {
      border: 1px solid #999;
      position: relative;
      overflow: hidden;
    }

    span::after {
      content: "";
      position: absolute;
      bottom: -10px;
      right: -10px;
      width: 20px;
      height: 20px;
      background-color: #f65464;
      transform: rotate(45deg);
    }
  }
}

.sheet-list {
  .headline {
    font-size: 16px;
    color: #333;
    line-height: 26px;
    margin-bottom: 8px;
    text-align: left;
  }

  .clearfix {
    font-size: 16px;
    color: #333;
    line-height: 26px;
    margin-bottom: 8px;

    .answer-chunk {
      float: left;
      width: 36px;
      height: 40px;
      overflow: hidden;
      border-radius: 2px;
      border: 1px solid #999;
      cursor: pointer;
      margin-right: 14px;
      margin-bottom: 14px;
      color: #999;
      font-size: 18px;
      position: relative;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: row;
    }

    .act2 {
      border-color: #266fff !important;
      color: #fff !important;
      background-color: #266fff !important;
    }
  }
}
</style>
